<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-wh__ishotelhomestay">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-select v-model="dataForm.comboType" clearable placeholder="预约类型">
            <el-option v-for="item in optionslaixing" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="dataForm.orderStatus" clearable placeholder="订单状态">
            <el-option v-for="item in optionsorderStatus" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.guestName" placeholder="预约人姓名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.guestPhone" placeholder="预约人手机号" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">{{ $t("query") }}</el-button>
        </el-form-item>
        <!--<el-form-item>-->
        <!--<el-button type="primary" @click="exportHandle()">{{-->
        <!--$t("export")-->
        <!--}}</el-button>-->
        <!--</el-form-item>-->
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border style="width: 100%">
        <el-table-column prop="comboType" width="110" align="center" label="预约类型">
          <template slot-scope="scope">
            <span v-if="scope.row.comboType == 1">包桌</span>
            <span v-if="scope.row.comboType == 2">按人均</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderAmount" label="总费用" header-align="center" align="center" sortable="custom"
          width="120" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="guestName" label="预约人姓名" sortable="custom" header-align="center"
          align="center"></el-table-column>
        <el-table-column prop="guestPhone" label="预约人手机号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="repastNum" label="就餐人数" header-align="center" align="center"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="repastTime" label="就餐时间" sortable="custom" header-align="center"
          align="center"></el-table-column>
        <el-table-column prop="roomNumber" label="关联房号" sortable="custom" header-align="center"
          align="center"></el-table-column>
        <!-- <el-table-column
          prop="remarks"
          label="备注"
          sortable="custom"
          header-align="center"
          align="center"
        ></el-table-column> -->
        <el-table-column prop="orderStatus" width="110" align="center" label="订单状态">
          <template slot-scope="scope">
            <span v-if="scope.row.orderStatus == -2">待支付</span>
            <span v-if="scope.row.orderStatus == 1">未核销</span>
            <span v-if="scope.row.orderStatus == 2">已核销</span>
            <span v-if="scope.row.orderStatus == 4">已取消</span>
            <span v-if="scope.row.orderStatus == 5">已退款</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="80">
          <template slot-scope="scope">
            <el-button v-if="$hasPermission('hotel:repast:saveNumber')" type="text" size="small"
              @click="writeRoomNumber(scope.row.id)">房号录入</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
        layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update :disabled="disabled" v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"
        @changeDisabled="disabled = false"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./cateringReservation-add-or-update";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      disabled: false,
      optionslaixing: [
        {
          value: 1,
          label: "包桌",
        },
        {
          value: 2,
          label: "按人均",
        },
      ],
      optionsorderStatus: [
        {
          value: -2,
          label: "待支付",
        },
        {
          value: 1,
          label: "未核销",
        },
        {
          value: 2,
          label: "已核销",
        },
        {
          value: 4,
          label: "已取消",
        },
        {
          value: 5,
          label: "已退款",
        },
      ],

      mixinViewModuleOptions: {
        getDataListURL: "/hotel/repast/getAppointmentPage",
        getDataListIsPage: true,
        exportURL: "/sys/ishotelhomestay/export",
        deleteURL: "/sys/ishotelhomestay",
        deleteIsBatch: true,
      },
      dataForm: {
        comboType: "",
        guestName: "",
        guestPhone: "",
        orderStatus: "",
      },
    };
  },
  watch: {
    "dataForm.status": {
      immediate: true,
      deep: true,
      handler(newValue) { },
    },
  },
  components: {
    AddOrUpdate,
  },
  created() {
    this.$http
      .get("sys/ishotelhomestay/page", {
        params: {
          page: 1,
          limit: 10,
        },
      })
      .then(({ data: res }) => { });
  },
  methods: {
    writeRoomNumber(id) {
      this.$prompt("请输入房间号", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /\S/,
        inputErrorMessage: "房间号不能为空",
      })
        .then(({ value }) => {
          this.$http
            .post("hotel/repast/updRepastOrder", {
              roomNumber: value,
              id: id,
            })
            .then((res) => {
              if (res.data.code == 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 500,
                });
              }
            });
        })
        .catch(() => { });
    },
    viewHandle(row) {
      this.addOrUpdateVisible = true;
      this.disabled = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.visible = true;
        // this.$refs.addOrUpdate.dataForm = row;

        this.$refs.addOrUpdate.dataForm.id = row.id;
        this.$refs.addOrUpdate.dataForm.details = true;
        this.$refs.addOrUpdate.init();
      });
    },
  },
};
</script>
